<template>
  <el-dialog
    title="修改密码"
    :visible.sync="visible"
    width="350px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-if="visible"
  >
    <el-form
      :model="passwordForm"
      label-width="100px"
      :rules="passwordFormRuls"
      ref="passwordForm"
      size="mini"
    >
      <el-form-item label="老密码" prop="oldPass">
        <el-input v-model="passwordForm.oldPass" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPass">
        <el-input v-model="passwordForm.newPass" show-password></el-input>
      </el-form-item>

      <el-form-item label="重复新密码" prop="newPass2">
        <el-input v-model="passwordForm.newPass2" show-password></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="passwordFormSave()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import { changePasswordUser } from '@/api/user';
import { mapState } from 'vuex';
export default {
  name: 'ChangePassword',
  data() {
    var checkNewPass = (rule, value, callback) => {
      if (this.passwordForm.newPass !== this.passwordForm.newPass2) {
        callback(new Error('两次输出密码不相同'));
      } else {
        callback();
      }
    };

    var checkPassword = (rule, value, callback) => {
      var s_1_1 = '`1234567890-=';
      var s_1_2 = 'qwertyuiop[]\\';
      var s_1_3 = "asdfghjkl;'";
      var s_1_4 = 'zxcvbnm,./';
      var s_2_1 = '`1234567890-=';
      var s_2_2 = 'QWERTYUIOP[]\\';
      var s_2_3 = "ASDFGHJKL;'";
      var s_2_4 = 'ZXCVBNM,./';
      var s_3_1 = '~!@#$%^&*()_+';
      var s_3_2 = 'QWERTYUIOP{}|';
      var s_3_3 = 'ASDFGHJKL:"';
      var s_3_4 = 'ZXCVBNM<>?';
      var boolean = true;

      for (var n = 0; n < value.length - 2; n++) {
        var char = value[n] + value[n + 1] + value[n + 2];
        if (
          s_1_1.indexOf(char) >= 0 ||
          s_1_2.indexOf(char) >= 0 ||
          s_1_3.indexOf(char) >= 0 ||
          s_1_4.indexOf(char) >= 0 ||
          s_2_1.indexOf(char) >= 0 ||
          s_2_2.indexOf(char) >= 0 ||
          s_2_3.indexOf(char) >= 0 ||
          s_2_4.indexOf(char) >= 0 ||
          s_3_1.indexOf(char) >= 0 ||
          s_3_2.indexOf(char) >= 0 ||
          s_3_3.indexOf(char) >= 0 ||
          s_3_4.indexOf(char) >= 0
        ) {
          boolean = false;
          break;
        }
      }
      console.log(boolean);
      if (boolean == true) {
        callback();
      }
      callback(new Error('密码中键盘顺序字符不得超过三个,请重新输入'));
    };
    return {
      visible: false,
      passwordForm: {
        userId: '',
        newPass: '',
        newPass2: '',
        oldPass: '',
      },
      passwordFormRuls: {
        oldPass: [{ required: true, message: '请输入老密码', trigger: 'blur' }],
        newPass: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            //插入正则验证:大小写、数字、至少8位、不常用字符
            pattern:
              /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@#!%^*?&+-])[A-Za-z\d$@#!%^*?&+-]{8,}/,
            message: '密码应当至少8位且含有数字、大小写字母及特殊字符',
          },
          //rule中插入比较复杂的验证方法
          { validator: checkPassword, trigger: 'blur' },
        ],
        newPass2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: checkNewPass, trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    init(value) {
      console.log(value);
      this.visible = true;
      this.passwordForm = {
        userId: '',
        newPass: '',
        newPass2: '',
        oldPass: '',
      };
    },
    passwordFormSave() {
      this.$refs['passwordForm'].validate((valid) => {
        if (valid) {
          this.passwordForm.userId = this.userId;
          // changePasswordUser(this.passwordForm).then((res) => {
          //   let { flag, errMsg } = res;
          //   if (flag) {
          //     this.$message.success({
          //       title: '成功',
          //       message: '修改密码成功',
          //     });

          //     this.visible = false;
          //   } else {
          //     this.$message.error({
          //       title: '出错',
          //       message: '修改密码失败' + errMsg,
          //     });
          //   }
          // });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  computed: {
    ...mapState({
      // 动态主路由
      userId: (state) => state.user.userId,
    }),
  },
};
</script>
<style scoped></style>
